import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaSearchGroup, WeaTable, WeaNewScroll, WeaLocaleProvider } from 'ecCom';
import { Spin } from 'antd';
import jQuery from 'jquery';

const { getLabel } = WeaLocaleProvider;
require('../../util/SignImgUtil');

@inject('odocSignGroupStore')
@observer
class Index extends React.Component {
  componentWillMount() {
    const loadjs = window.loadjs;
    loadjs('/social/js/imcarousel/imcarousel.js', 'signImcarousel');
    let { workflowid = '', requestid = '', tabid = '' } = this.props.location.query;
    let { getSignGroupPageList, setProperty, initLogParams } = this.props.odocSignGroupStore;
    if (window.parent && window.parent.WfForm && window.parent.WfForm.getGlobalStore()) {
      let { commonParam } = toJS(window.parent.WfForm.getGlobalStore());
      initLogParams(commonParam);
    }
    setProperty({
      pageLoading: true,
      workflowid,
      requestid,
      tabid,
    });
    getSignGroupPageList();
  }

  loadImag = () => {
    window.odocSignImgUtil.odocFormImgLazyLoad(jQuery('.workflow-signSetting'));// 图片懒加载
  }

  getColumn = (data) => {
    let newItem = [];
    toJS(data).map((item) => {
      if (item.key === 'remark') {
        let comp = {
          ...item,
          render: (text, record) => this.getRemarkComp(text, record),
        };
        newItem.push(comp);
      } else if (item.key === 'operator') {
        let comp = {
          ...item,
          render: (text, record) => <a style={{ color: '#4D7AD8' }} href={`javaScript:openhrm(${record.operatorid});`} onClick={(event) => { pointerXY(event); }}>{record.operator}</a>,
        };
        newItem.push(comp);
      } else {
        newItem.push(item);
      }
    });
    return newItem;
  }

  download = (url) => {
    jQuery('#SignFileDownload').attr('src', url);
  }

  // 意见数据
  getRemarkComp = (text, record) => {
    let { logParams } = this.props.odocSignGroupStore;
    let { authStr = '', authSignatureStr = '' } = toJS(logParams);
    let { annexdocs = [], signdocs = [], signwfs = [], remarkLocation = '' } = toJS(record);
    let locationInfoData = {};
    if (remarkLocation != '') {
      locationInfoData = window.odocSignImgUtil.getLocationInfoData(remarkLocation);
    }
    return (<div>
      <div dangerouslySetInnerHTML={{ __html: text }} />
      {annexdocs.length > 0 && <div className="content-right-docs">
        <i className="icon-mail-enclosure" />
        <div>
          {annexdocs.map((d = {}) => {
            const { filelink = '', tempshowname = '', fileExtendName = '', downloadlink = '', docImagefileSize, showdownload } = d;
            return (<p><a target="_blank"
              style={{ color: '#4d7ad8' }}
              href={filelink}
            >{`${tempshowname}.${fileExtendName}`}</a>{' '}{showdownload == true && <a style={{ color: '#4d7ad8' }}
              onClick={() => {
                this.download(`${downloadlink}&_t=${new Date().getTime()}`);
              }}
            >{`[${getLabel('31156', '下载')}(${(docImagefileSize / 1000).toFixed(1)}k)]`}</a>}</p>);
          })}
        </div>
      </div>
      }
      {signdocs.length > 0 && <div className="content-right-docs">
        <i className="icon-search-File" />
        <div>
          {signdocs.map((d = {}) => <p><a target="_blank" style={{ color: '#4d7ad8' }} href={d.filelink}>{d.tempshowname}</a></p>)}
        </div>
      </div>
      }
      {signwfs.length > 0 && <div className="content-right-docs">
        <i className="icon-coms-workflow" />
        <div>
          {signwfs.map((w = {}) => (<p><a target="_blank"
            style={{ color: '#4d7ad8' }}
            onClick={() => {
              openFullWindowHaveBar(`/workflow/request/ViewRequestForwardSPA.jsp?requestid=${w.requestid}&isrequest=1&isovertime=0&desrequestid=${w.desrequestid}&authStr=${authStr}&authSignatureStr=${authSignatureStr}`);
            }}
          >{w.title}</a></p>))}
        </div>
      </div>
      }
      {
        (remarkLocation != '') && (locationInfoData.longitude) && <div className="content-right-docs">
          <i className="icon-coms-position" title={getLabel(22981, '位置')} />
          <div>
            <a style={{ color: '#4d7ad8' }} onClick={() => { window.parent.openlocation(remarkLocation, parent.jQuery('#container')[0]); }}>{locationInfoData.name}</a>
          </div>
        </div>
      }
      {this.getUserImg(record)}
      {/* {userimg!="" && <div dangerouslySetInnerHTML={{__html:userimg}}/>} */}
    </div>);
  }

  // 签章数据
  getUserImg = (itemData) => {
    const { qys_signature_id = '', userimg = '', signnaturImgHeight, qyswidth = 0, qysheight = 0 } = itemData;
    let imgstyle = {};
    if (qyswidth > 0 && qysheight > 0) {
      imgstyle.width = qyswidth;
      imgstyle.height = qysheight;
    }
    const maxHeightStyle = signnaturImgHeight == -1 ? 'none' : `${signnaturImgHeight}px`;
    if (qys_signature_id && qys_signature_id != '') {
      return (
        <div className="content-right-userimg">
          <img src={`/weaver/weaver.file.FileDownload?fileid=${qys_signature_id}`} {...imgstyle} />
        </div>
      );
    } else if (userimg && userimg != '') {
      return (
        <div className="content-right-userimg">
          <img style={{ maxHeight: `${maxHeightStyle}` }} id="markImg" src={userimg} />
        </div>
      );
    }
    return <div />;
  }

  getGroupComp = (item, index) => {
    let { signGroupPageLoadMore } = this.props.odocSignGroupStore;
    let { groupName, groupDatas, groupColumn, groupid, mouldid, pagenumber, hasmore } = item;
    return (<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@pdq4fp`} title={<span style={{ fontWeight: 'bold' }}>{groupName}</span>} showGroup={true}>
      <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@6znt75`} columns={this.getColumn(groupColumn)} dataSource={groupDatas} draggable={false} pagination={false} />
      {hasmore == '1' && <div className={'signsetting-load-more'} onClick={() => { signGroupPageLoadMore(groupid, mouldid, pagenumber, index); }}>
        <i className={'anticon anticon-arrow-down'} style={{ marginRight: '4px' }} />{getLabel(82720, '加载更多')}
      </div>}
    </WeaSearchGroup>);
  }

  render() {
    let { groupLists, pageLoading } = this.props.odocSignGroupStore;
    return (
      <div className={'workflow-signSetting'} id={'workflow_signSetting'}>
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@5p7b2c`} spinning={pageLoading} size={'large'}>
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@cr35lc`} height={jQuery(window).height()} onScroll={this.loadImag}>
            {
              groupLists.map((item, index) => this.getGroupComp(item, index))
            }
          </WeaNewScroll>
        </Spin>
        <div style={{ display: 'none' }}>
          <iframe src="" frameBorder="0" id={'SignFileDownload'} title="navigation" />
        </div>
      </div>
    );
  }
}
export default Index;
